import React, { useEffect, useState } from "react";
import { Menu } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import {
  OrderedListOutlined,
  SlackOutlined,
  ContactsOutlined,
} from "@ant-design/icons";

export default function MySide() {
  // const [collapsed, setCollapsed] = React.useState(false);
  let [defaultKey, setDefaultKey] = useState("");
  let path = "";
  const navigate = useNavigate();
  let { pathname } = useLocation();

  if (pathname !== "/edit" && /\/edit/.test(pathname)) {
    path = pathname.slice(0, 5);
  } else {
    path = pathname;
  }
  //模仿ComponentDidMount
  useEffect(() => {
    defaultKey = setDefaultKey(path);
  }, [pathname]);

  const handleClick = (e) => {
    navigate(e.key);
    setDefaultKey(e.key);
  };

  return (
    <div style={{ width: 200 }}>
      <Menu
        selectedKeys={[defaultKey]}
        mode="inline"
        theme="dark"
        onClick={handleClick}
      >
        <Menu.Item key="/list" title="文章列表">
          <OrderedListOutlined /> 文章列表
        </Menu.Item>
        <Menu.Item key="/edit" title="文章编辑">
          <SlackOutlined /> 文章编辑
        </Menu.Item>
        <Menu.Item key="/personal" title="个人中心">
          <ContactsOutlined /> 个人中心
        </Menu.Item>
      </Menu>
    </div>
  );
}
